<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>教师统计</title>
    <link href="/cms/frame/bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/cms/frame/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link href="/cms/frame/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #statContainer {
            width: 100%;
            height: 100%;
        }

        #statContainer {
            display: flex;
            flex-direction: column;
        }

        #statNav {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: 华文宋体;
            border-bottom: 1px solid rgba(0, 255, 178, 0.04);
        }

        #statCenter {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .chart-container-1 {
            width: 60%;
        }

        .chart-container-2 {
            width: 60%;
        }

        .view-salary-btn {
            position: absolute;
            right: 20px;
            bottom: 20px;
            padding: 10px 20px;
            background-color: #00bbff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .view-salary-btn:hover {
            background-color: #0066ff;
        }
    </style>
</head>

<body>
<div id="statContainer">
    <div id="statNav">
        <span>统计分析</span>/<span>教师统计</span>
    </div>
    <div id="statCenter">
        <div class="chart-container-1">
            <canvas id="ageSalaryTrendChart"></canvas>
            <h5 class="text-center">平均薪资随年龄变化趋势</h5>
        </div>
        <div class="chart-container-2">
            <canvas id="ageSalaryChart"></canvas>
            <h5 class="text-center">各年龄区间平均薪资</h5>
        </div>
    </div>
    <button class="view-salary-btn" onclick="window.location.href='stat2.html'">返回</button>
</div>

<script src="/cms/frame/js/jquery-3.7.1.min.js"></script>
<script src="/cms/frame/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function () {
        loadStatistics();
    });

    function loadStatistics() {
        $.post("/cms/TeaController/ageSalaryAnalysis", function (data) {
            const ageData = data.data;
            const ageLabels = ageData.map(item => item.ageGroup);
            const averageSalaries = ageData.map(item => parseFloat(item.averageSalary.replace(/,/g, '')));
            const counts = ageData.map(item => item.count);

            drawAgeSalaryTrendChart(ageLabels, averageSalaries, counts);
            drawAgeSalaryChart(ageLabels, averageSalaries);
        });
    }

    function drawAgeSalaryTrendChart(labels, data, counts) {
        const ctx = document.getElementById('ageSalaryTrendChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '平均薪资',
                    data: data,
                    borderColor: '#FF4384',
                    pointBackgroundColor: '#FF3322',
                    fill: false,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '平均薪资 (¥)'
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                const index = tooltipItem.dataIndex;
                                const percentage = ((counts[index] / counts.reduce((a, b) => a + b, 0)) * 100).toFixed(2);
                                return `${tooltipItem.label}: ${tooltipItem.raw} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    function drawAgeSalaryChart(labels, data) {
        const ctx = document.getElementById('ageSalaryChart').getContext('2d');

        const colors = [
            '#FF5733', '#FF6384', '#FFCE56', '#4BC0C0', '#9966FF',
            '#45B500', '#FFA500', '#C70039', '#900C3F', '#800000',
            '#FFC300', '#DAF7A6', '#FFC0CB', '#FF4500', '#7FFF00',
            '#8A2BE2', '#D2691E', '#CD5C5C', '#FFFACD', '#ADFF2F',
            '#F0E68C', '#4682B4', '#5F9EA0', '#20B2AA', '#778899',
            '#B0C4DE', '#708090', '#FFD700', '#36A2EB', '#DDA0DD'
        ];

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '平均薪资',
                    data: data,
                    backgroundColor: colors,
                    borderColor: '#fff',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '平均薪资 (¥)'
                        }
                    }
                }
            }
        });
    }
</script>
</body>
</html>
